<template>
  <div>
    <div class="card card-custom gutter-b example example-compact" id="tableBody">
      <div class="card-header">
        <div class="card-title">
          <span class="card-icon">
            <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
          </span>
          <h3 class="card-label"> 查询区域 </h3>
        </div>
        <div class="card-toolbar">
          <div class="example-tools justify-content-center">
            <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
            -->
          </div>
        </div>
      </div>
      <div class="card-body">
        <!--查询条件-->
        <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
          <div class="m-portlet__body">
            <div class="form-group m-form__group row">
              <label class="col-form-label">名称:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
              </div>     
              <label class="col-form-label">编码:</label>
              <div class="col-md-2">
                <input type="text" class="form-control" v-model="searchForm.code" placeholder="请输入">
              </div>              
              <b-button :pressed="false" variant="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="search()"><span><i
                class="flaticon-search-magnifier-interface-symbol"></i><span>查 询</span></span></b-button>
              <b-button :pressed="false" variant="btn btn-light font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="resetAll()">
                <span><i class="flaticon2-refresh"></i><span>重 置</span></span></b-button>
              <button class="btn btn-light-success font-weight-bold font-size-sm py-3 px-8 "
                v-permission="{ action: '/sysDepartInfo/add', effect: 'display' }" @click="addSysDepartInfo">
                <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
              </button>
            </div>
          </div>
          <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions--solid">
              <div class="row">
                <div class="col m--align-left">

                </div>
                <div class="col m--align-right">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--分页组件-->
      <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
        :data="departList">

        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name"  show-overflow-tooltip label="部门名称" min-width="100"></el-table-column>
        <el-table-column align="center" prop="connectTelNo" show-overflow-tooltip label="联系电话"></el-table-column>
        <el-table-column align="center" prop="mobileTelNo" show-overflow-tooltip label="移动电话"></el-table-column>
        <el-table-column align="center" prop="faxes" show-overflow-tooltip label="传真"></el-table-column>
        <el-table-column align="center" prop="setUpTime" show-overflow-tooltip label="成立时间"></el-table-column>
        <el-table-column align="center" prop="type" show-overflow-tooltip label="性质">

        </el-table-column>
        <el-table-column align="center" prop="code" show-overflow-tooltip label="编码">

        </el-table-column>
        <!-- <el-table-column align="center" prop="createBy" label="创建人" min-width="150"></el-table-column> -->
        <el-table-column align="center" prop="createTime" show-overflow-tooltip label="创建时间" min-width="180"></el-table-column>
        <!-- <el-table-column align="center" prop="modifiedBy" label="修改人" min-width="150"></el-table-column>
        <el-table-column align="center" prop="updateTime" label="修改时间" min-width="180"></el-table-column> -->
        <el-table-column align="center" label="操作" fixed="left" min-width="280">
          <template slot-scope="scope">
            <!--scope.row当前行的对象-->
            <button @click="getDepartInfoDetail(scope.row)" class="btn btn-link" title="详情">详 情</button>
            <button class="btn btn-link"
              v-permission="{ action: '/sysDepartInfo/update', effect: 'disabled' }" @click="updateSysDepartInfo(scope.row)"
              >
              <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
            </button>
            <button class="btn btn-link-danger"
              v-permission="{ action: '/sysDepartInfo/delete', effect: 'disabled' }" @click="delSysDepartInfo(scope.row)"
              >
              <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
            </button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
          layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </div>
    <DepartAdd ref="departAddRef" @change="search"></DepartAdd><!--采用父窗口关闭传递的方法-->
    <DepartUpdate ref="departUpdateRef" @change="search"></DepartUpdate><!--采用父窗口关闭传递的方法-->
    <DepartDetail ref="departDetailRef"></DepartDetail>
  </div>
</template>

<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import DepartAdd from "@/view/sys/sys-depart-info/sys-depart-info-add.vue";
import DepartUpdate from "@/view/sys/sys-depart-info/sys-depart-info-update.vue";
import DepartDetail from "@/view/sys/sys-depart-info/sys-depart-info-detail.vue";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
  data() {
    return {
      searchForm: { name: "",code:"", },
      departList: [],
      sels: [], //当前选框选中的值
      pageNo: 1,      // 默认当前是第一页
      pageSize: 5,    // 当前每页的数据是5条
      totalCount: 0   // 总数默认为0
    }
  },
  components: {
    DepartAdd,
    DepartUpdate,
    DepartDetail,
  },
  mounted() {
    this.$store.dispatch(SET_BREADCRUMB, [{ title: "部门管理" }]);
    this.initList();   // 按当前的页号和每页的数据量进行查询
  },
  methods: {
    initList() {
      showWating({ renderBody: "tableBody" });
      this.searchForm.usePageNo = true;//采用第几页进行分页（兼容）
      this.searchForm.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
      this.searchForm.pageNo = this.pageNo;//开始的记录序号   
      apiUtil.query(process.env.VUE_APP_SYS_API + "/sysDepartInfo/list", this.searchForm).then(({ data }) => {
        this.departList = data.data;//给结果集赋值
        this.totalCount = data.total;// 获取当前数据的总数    
      });
    },
    handleSelectionChange(sels) {//获取选中的值
      this.sels = sels;
    },
    addSysDepartInfo() {//新建
      this.$refs.departAddRef.showModal()
    },
    updateSysDepartInfo(row) {// 更新
      this.$refs.departUpdateRef.showModal(row.id);
    },
    delSysDepartInfo(row) { // 删除
      // 删除前提示
      this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
        apiUtil.delete(process.env.VUE_APP_SYS_API + "/sysDepartInfo/delete?id=" + row.id).then(data => {
          if (data.data.success) {
            handleAlert("删除成功", "success", 3);
            this.search();
          } else {
            handleAlert("删除失败", "error", 3);
          }
        });
      }).catch(() => { });//注意这里，这里是重点！！！;        
    },
    handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
      this.pageSize = val;  // 修改页的大小
      this.initList();       // 按新的pageNo和pageSize进行查询
    },
    handleCurrentChange(val) { // 修改当前页所触发的函数
      this.pageNo = val;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    search() {
      this.pageNo = 1;       // 更新当前的页
      this.initList();          // 按新的pageNo和pageSize进行查询
    },
    resetAll() {
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
      this.search();
    },
    getDepartInfoDetail(row) {
      this.$refs.departDetailRef.showModal(row.id);
    },
  }
};
</script>